<template>
  <div class="yibiao">
    <img src="@/assets/image/thumbnail/yibiao.png" class="yibiao-img" alt="yibiao">
    <img src="@/assets/image/thumbnail/重点设备.svg" class="yibiao-icon"  alt="重点设备">



    <div class="yibiao-number-null">{{deviceNumber}}</div>

    <div class="yibiao-name">{{ deviceName }}</div>
    <img src="@/assets/image/thumbnail/yibiao_green.png" class="yibiao-status-icon" alt="yibiao_green">
    <div class="yibiao-status">
      <dict-tag :options="dict.type.device_status" :value="deviceStatus"/>
    </div>

  </div>
</template>

<script>
export default {
  name: "MeterComp",
  dicts: ['device_status'],
  props: {
    deviceStatus: {
      type: String,
    },
    deviceType: {
      type: String
    },
    deviceName: {
      type: String
    },
    deviceNumber: {
      type: String,
    },

  }
}
</script>

<style scoped>
.yibiao {
  height: 252px;
  width: 252px;
  position: relative;
}

.yibiao-icon {
  position: absolute;
  top: 40px;
  bottom: 0;
  left: 121px;
  right: 0;
  margin: 0;
  z-index: 11;
  width: 18px;
  height: 25px;
}

.yibiao-img {
  position: absolute;
  top: 0px;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 10;
}

.yibiao-title {
  position: absolute;
  top: 71px;
  bottom: 0;
  left: 98px;
  right: 0;
  margin: auto;
  font-family: "Source Han Sans";
  font-size: 14px;
  color: #333333;
  font-weight: 500;
  z-index: 11;
  letter-spacing: 1px;
}

.yibiao-number {
  position: absolute;
  top: 98px;
  bottom: 0;
  left: 47px;
  right: 0;
  margin: 0;
  font-family: "Alibaba PuHuiTi";
  font-size: 32px;
  color: #459158;
  letter-spacing: 0;
  font-weight: 700;
  text-align: center;
  width: 140px;
  z-index: 11;
}

.yibiao-number-null {
  position: absolute;
  top: 98px;
  bottom: 0;
  left: 59px;
  right: 0;
  margin: 0;
  font-family: "Alibaba PuHuiTi";
  font-size: 32px;
  color: #459158;
  letter-spacing: 0;
  font-weight: 700;
  text-align: center;
  width: 140px;
  z-index: 11;
}

.yibiao-unit {
  position: absolute;
  top: 118px;
  bottom: 0;
  left: 189px;
  right: 0;
  margin: auto;
  font-family: "Source Han Sans";
  font-size: 12px;
  color: #459158;
  letter-spacing: 0;
  font-weight: 500;
  z-index: 11;
}

.yibiao-name {
  position: absolute;
  top: 153px;
  bottom: 0;
  left: 75px;
  right: 0;
  margin: 0px;
  font-family: "Source Han Sans";
  font-size: 20px;
  color: #333333;
  letter-spacing: 0;
  text-align: center;
  font-weight: 500;
  width: 105px;
  z-index: 11;
}

.yibiao-status-icon {
  position: absolute;
  top: 201px;
  bottom: 0;
  left: 108px;
  right: 0;
  margin: 0px;
  width: 7px;
  height: 7px;
  z-index: 11;
}

.yibiao-status {
  position: absolute;
  top: 196px;
  bottom: 0;
  left: 120px;
  right: 0;
  margin: 0px;
  font-family: "Source Han Sans";
  font-size: 12px;
  color: #459158;
  letter-spacing: 0;
  font-weight: 500;
  z-index: 11;
}

.yibiao-status-offline {
  position: absolute;
  top: 196px;
  bottom: 0;
  left: 120px;
  right: 0;
  margin: 0px;
  font-family: "Source Han Sans";
  font-size: 12px;
  color: #FF5B57;
  letter-spacing: 0;
  font-weight: 500;
  z-index: 11;
}
</style>
